<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field 
        v-model=editedTeam.teamName
        label='队伍名称'
        placeholder='队伍名称'
        :rules="[{ required: true, message: '请填写队伍名称' }]"
      />
      <van-field name="stepper" label="队伍最大人数">
        <template #input>
          <van-stepper v-model="editedTeam.maxNum" max="5"/>
        </template>
      </van-field>
      <van-field 
        v-model=editedTeam.description
        label='队伍描述'
        placeholder='队伍描述'
        :rules="[{ required: true, message: '请填写队伍描述' }]"
      />
      <van-field 
        v-model=editedTeam.teamPassword
        type="password"
        label='队伍密码'
        placeholder='队伍密码'
        :rules="[{ required: true, message: '请填写队伍密码' }]"
      />

      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="editedTeam.teamStatus" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私有</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model=editedTeam.expireTime
        is-link
        readonly
        name="datePicker"
        label="队伍过期时间"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" :min-date="minDate"/>
      </van-popup>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
  
  
  
  
  
<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router';
import myAxios from '../../plugins/myAxios';
import { showToast } from 'vant';

const router = useRouter()
const minDate = new Date(2023,6,27)

const editedTeam = ref(
   {
     "description": "",
     "expireTime": "",
     "maxNum":'' ,
     "teamName": "",
     "teamPassword": "",
     "teamStatus": '',
     "userId": ''
  }
)


const onSubmit = async() => {
  //将前端数据status转成数字类型
  const postData = {
    ...editedTeam.value,
    teamStatus:Number(editedTeam.value.teamStatus)
  }
  const res = await myAxios.post('/team/add',postData)
  if(res.data.code === 0){
    showToast('添加成功')
    router.push({
      path:'/team',
      replace:true
    })
  }
};

const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
  editedTeam.value.expireTime = selectedValues.join('-');
  showPicker.value = false;
};
</script>



<style scoped>

</style>